<template>
  <!-- index跳转到这个页面 ，进行搜索 -->
  <div
    class="container clearfix"
    id="container1"
    style="height: 100px !important"
  >
    <!-- 搜索栏 -->
    <div class="search clearfix">
      <van-nav-bar
        class="fanhui"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
      <div class="search-shuru">
        <van-search
          class="search1"
          style="font-size: var(--fontsize-one)"
          v-model="values"
          shape="round"
          placeholder="请输入搜索关键词"
          background="var(--color-primary)"
          clearable
        />
      </div>
      <div class="search-sousuo">
        <button @click="onClickButton" @keyup.enter.native="onClickButton">
          搜索
        </button>
      </div>
    </div>
    <div class="neirong clearfix" v-if="values.length == 0">
      <!-- 搜索历史 -->
      <div class="neirongup" v-if="values.length == 0">
        <!-- 搜索历史标题 -->
        <div class="icons">
          <div><span>搜索历史</span></div>
          <div>
            <!-- 删除图标 -->
            <van-icon @click="qingkonghistory" name="delete-o" />
          </div>
        </div>
        <!-- 搜索历史 历史内容 -->
        <div class="Historicalbody">
          <div>
            <div>
              <!-- <p><span>手机</span></p> -->
              <p style="height: 60px; overflow: hidden">
                <span
                  ref="sonData"
                  class="Historical"
                  style="height: 24px"
                  v-for="(item, index) in Historicalbodys"
                  :key="index"
                  @click="goSearchDetail(item)"
                  >{{ item }}</span
                >
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门搜索 -->
      <div v-if="shops.length == 0">
        <div class="neirongdown" v-if="shops.length == 0">
          <!-- 热门搜索头部栏 -->
          <div class="icons">
            <div>
              <span
                >热门搜索
                <!-- 火 -->
                <van-icon name="fire-o" color="#ee0a24"
              /></span>
            </div>
          </div>
          <!-- 热门搜索内容 -->
          <div class="hot-searchbody">
            <div
              v-for="item in 8"
              class="hot-search"
              style="padding: 5px; width: calc((100% - 20px) / 2)"
            >
              <div style="padding-right: 5px">
                <van-image
                  @click="$router.push('/IndexShopDetail')"
                  class="vanImage"
                  width="50"
                  height="50"
                  fit="contain"
                  src="https://cdn3.axureshop.com/demo/2002929/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/p7.png"
                />
              </div>
              <div>
                <span style="height: 40px" class="vanImagedesc line-2">
                  手机热么排行第一名的人发过
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jieguo clearfix" v-else>
      <!-- 搜索结果 -->
      <div class="jiegoudown">
        <!-- 搜索结果头部栏 -->
        <div class="icons">
          <div>
            <span>搜索结果 </span>
          </div>
        </div>
        <!-- 搜索结果内容 -->
        <div class="hot-searchbody">
          <ShopItemNew
            v-for="item in JSON.parse(JSON.stringify(shops))"
            :key="item.goods_id"
            :shop="item"
          ></ShopItemNew>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import '@/assets/css/reset.css'
import '@/assets/css/base.css'
import { onMounted, ref, reactive } from 'vue'
import httpApi from '@/http'
import Shop from '@/types/Shop'
// 返回上个页面
const onClickLeft = () => history.back()
// 搜索
// 通过名称模糊查询商品
let values = ref('')
var Historicalbodys: string[] = reactive<string[]>([''])
// 第一个值为空删除第一个
Historicalbodys.splice(0, 1)
onMounted(() => {
  // bug 空的就报错
  console.log('判断类型', typeof localStorage.getItem('Historicalbodys'))
  console.log('获取本地', localStorage.getItem('Historicalbodys'))
  if (localStorage.getItem('Historicalbodys') === null) {
    return
  } else {
    let Historic = localStorage.getItem('Historicalbodys')
    let Historica = Historic?.split(',')
    let Historical = Historica?.reverse()
    console.log('获取本地存储的历史搜索', Historical)
    Historicalbodys.push(...Historical!)
  }
})

const shops = reactive<Shop[]>([])
// 点击搜索查询
function onClickButton() {
  if (values.value.length === 0) {
    console.log('搜索内容不能为空！！！')
  } else {
    console.log(values.value)
    Historicalbodys.unshift(values.value)
    function unique(arr) {
      var newArr = []
      for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i])
        }
      }
      return newArr
    }
    Historicalbodys = unique(Historicalbodys)
    console.log('筛选是否重复', unique(Historicalbodys))
    localStorage.setItem('Historicalbodys', Historicalbodys.toString())
    let params = { goods_name: values.value }
    console.log(params)
    httpApi.commodityApi.queryIndistinctAll(params).then(res => {
      console.log('通过名称模糊查询商品', res)
      let shop: Shop[] = res.data.data
      shops.length = 0
      shops.push(...shop)
      console.log('搜索', shops)
    })
  }
}
//values = 'name'
//点击历史搜索，跳转搜索结果页
function goSearchDetail(name) {
  values = name
  console.log(values)
  console.log(name)
  //name = 肉
  // 字符串转为对象
  let a = { goods_name: name }

  let params: {} = a
  // console.log(typeof params)
  httpApi.commodityApi.queryIndistinctAll(params).then(res => {
    console.log('通过名称模糊查询商品', res)
    let shop: Shop[] = res.data.data
    shops.length = 0
    shops.push(...shop)
    console.log('历史搜索', shops)
  })
}

document.onkeydown = function (_e) {
  let key = (window as any).event.keyCode
  if (key === 13) {
    onClickButton()
  }
}
// 历史搜索清空
function qingkonghistory() {
  Historicalbodys.length = 0
  localStorage.removeItem('Historicalbodys')
}
// 获取屏幕高度
onMounted(() => {
  // 获取浏览器可视区域高度
  const clientHeight = document.documentElement.clientHeight
  // console.log(clientHeight) //测试高度
  // ! 表示非空断言
  document.getElementById('container1')!.style.height = clientHeight - 88 + 'px'
  // console.log(clientHeight + 'px')
  // 减88头部栏高度
})
//
</script>

<style scoped lang="scss">
.container {
  background-color: var(--color-white);
}
/* 搜索栏 */
.search {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 88px;
  background-color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  .fanhui {
    position: fixed;
    top: 43px;
    left: -15px;
    --van-nav-bar-arrow-size: 24px;
  }
  .search-shuru {
    .search1 {
      position: fixed;
      left: 14px;
      right: 50px;
      height: 30px;
      top: 50px;
      line-height: 30px;
    }
  }
  .search-sousuo {
    position: fixed;
    right: 20px;
    height: 30px;
    top: 50px;
    color: var(--color-grey-three);
    font-size: var(--fontsize-one);
    text-align: center;
    line-height: 30px;
  }
}
// 搜索内容
.neirong {
  width: 100%;
  height: 100%;
  margin-top: 88px;
  position: relative;
  // 搜索历史
  .icons {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
  }
  .neirongup {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 20px;
    // 历史主体
    .Historicalbody {
      padding: 0 15px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      // 搜索历史内容
      .Historical {
        height: 24px;
        margin: 4px;
        margin-bottom: 5px;
        padding: 2px 10px;
        background-color: var(--color-grey-three);
        border-radius: 12px;
        text-align: center;
        line-height: 30px;
        font-size: 18px;
      }
    }
  }
  // 热门搜索
  .neirongdown {
    width: 100%;
    position: absolute;
    left: 0;
    top: 120px;
    // 热门搜索主体
    .hot-searchbody {
      padding: 10px 15px;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: flex-start;
      .hot-search {
        margin-bottom: 5px;
        height: 60px;
        box-sizing: border-box;
        position: relative;
        background-color: var(--color-grey-three);
        border-radius: 12px;
        .vanImage {
          position: absolute;
          top: 50%;
          margin-top: -25px;
        }
        .vanImagedesc {
          position: absolute;
          top: 50%;
          margin-top: -20px;
          left: 50%;
          margin-left: -20px;
          margin-right: 10px;
        }
      }
    }
  }
}
// 搜索结果
.jieguo {
  width: 100%;
  height: 100%;
  margin-top: 88px;
  position: relative;
  // 搜索历史
  .icons {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
  }
  // 热门搜索
  .jieguodown {
    width: 100%;
    position: absolute;
    left: 0;
    top: 6px;
    // 热门搜索主体
    .hot-searchbody {
      padding: 10px 15px;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: flex-start;
      .hot-search {
        margin-bottom: 5px;
        height: 60px;
        box-sizing: border-box;
        position: relative;
        background-color: var(--color-grey-three);
        border-radius: 12px;
        .vanImage {
          position: absolute;
          top: 50%;
          margin-top: -25px;
        }
        .vanImagedesc {
          position: absolute;
          top: 50%;
          margin-top: -20px;
          left: 50%;
          margin-left: -20px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
